{% extends "base.html" %}

{% block title %}Monthly Reports | Service Performance Reporting Portal{% endblock %}

{% block extra_css %}

<style>

    .page-header {
        margin-bottom: 28px;
    }

    .page-header-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
    }

    .page-title {
        margin: 0;
        color: #1f2933;
        font-size: 28px;
        font-weight: 700;
    }

    .page-subtitle {
        margin: 8px 0 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }

    .generate-form {
        margin: 0;
    }

    .generate-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 17px;
        border: none;
        border-radius: 8px;
        background: #1f2933;
        color: #ffffff;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: 0.2s ease;
    }

    .generate-button:hover {
        background: #111827;
    }

    .reports-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }

    .table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .reports-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 850px;
    }

    .reports-table th {
        padding: 15px 18px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        color: #6b7280;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .reports-table td {
        padding: 17px 18px;
        border-bottom: 1px solid #f0f0f0;
        color: #374151;
        font-size: 13px;
        vertical-align: middle;
    }

    .reports-table tbody tr:last-child td {
        border-bottom: none;
    }

    .reports-table tbody tr:hover {
        background: #fafafa;
    }

    .school-name {
        color: #1f2933;
        font-weight: 600;
    }

    .report-period {
        color: #4b5563;
    }

    .created-date {
        color: #6b7280;
        font-size: 12px;
    }

    .status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-generated {
        background: #f3f4f6;
        color: #4b5563;
    }

    .status-prepared {
        background: #e0f2fe;
        color: #075985;
    }

    .status-submitted {
        background: #fef3c7;
        color: #92400e;
    }

    .status-reviewed {
        background: #dcfce7;
        color: #166534;
    }

    .status-rejected {
        background: #fee2e2;
        color: #991b1b;
    }

    .actions {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 10px;
        border-radius: 7px;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: 0.2s ease;
    }

    .action-primary {
        background: #1f2933;
        color: #ffffff;
    }

    .action-primary:hover {
        background: #111827;
    }

    .action-secondary {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #e5e7eb;
    }

    .action-secondary:hover {
        background: #e5e7eb;
    }

    .action-review {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .action-review:hover {
        background: #fde68a;
    }

    .action-success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }

    .action-success:hover {
        background: #bbf7d0;
    }

    .action-danger {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .action-danger:hover {
        background: #fecaca;
    }

    .empty-state {
        padding: 70px 25px;
        text-align: center;
    }

    .empty-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #f3f4f6;
        color: #9ca3af;
        font-size: 24px;
    }

    .empty-title {
        margin: 0 0 7px;
        color: #1f2933;
        font-size: 16px;
        font-weight: 600;
    }

    .empty-description {
        margin: 0;
        color: #6b7280;
        font-size: 13px;
    }

    .rejected-message {
        display: block;
        margin-top: 6px;
        max-width: 250px;
        color: #991b1b;
        font-size: 11px;
        line-height: 1.5;
    }

    .school-view-note {
        margin-bottom: 20px;
        padding: 13px 16px;
        background: #f3f7fa;
        border-left: 4px solid #1f2933;
        border-radius: 7px;
        color: #4b5563;
        font-size: 12px;
        line-height: 1.6;
    }

    @media (max-width: 800px) {

        .page-header-top {
            flex-direction: column;
        }

        .generate-form,
        .generate-button {
            width: 100%;
        }

    }

</style>

{% endblock %}


{% block content %}

<div class="page-header">

    <div class="page-header-top">

        <div>

            <h1 class="page-title">
                Monthly Reports
            </h1>

            {% if current_user.role == "school" %}

                <p class="page-subtitle">
                    View and manage your school's monthly service performance reports.
                </p>

            {% else %}

                <p class="page-subtitle">
                    Generate, prepare, review, and manage monthly service performance reports.
                </p>

            {% endif %}

        </div>


        {% if current_user.role in ["admin", "superadmin"] %}

            <form
                method="POST"
                action="{{ url_for('generate_monthly_reports') }}"
                class="generate-form"
            >

                <input
                    type="hidden"
                    name="csrf_token"
                    value="{{ csrf_token() }}"
                >

                <button
                    type="submit"
                    class="generate-button"
                >
                    <i class="fa-solid fa-file-circle-plus"></i>
                    Generate Monthly Reports
                </button>

            </form>

        {% endif %}

    </div>

</div>


{% if current_user.role == "school" %}

    <div class="school-view-note">

        <i class="fa-solid fa-circle-info"></i>

        Your reports will appear here once they have been prepared
        and made available by the administrator.

    </div>

{% endif %}


<div class="reports-card">

    {% if reports %}

        <div class="table-wrapper">

            <table class="reports-table">

                <thead>

                    <tr>

                        {% if current_user.role in ["admin", "superadmin"] %}

                            <th>
                                School
                            </th>

                        {% endif %}

                        <th>
                            Reporting Period
                        </th>

                        <th>
                            Status
                        </th>

                        <th>
                            Created
                        </th>

                        <th>
                            Actions
                        </th>

                    </tr>

                </thead>


                <tbody>

                    {% for report in reports %}

                        <tr>

                            {% if current_user.role in ["admin", "superadmin"] %}

                                <td>

                                    <span class="school-name">
                                        {{ report.school.name }}
                                    </span>

                                </td>

                            {% endif %}


                            <td>

                                <span class="report-period">
                                    {{ report.reporting_period }}
                                </span>

                            </td>


                            <td>

                                {% if report.status == "generated" %}

                                    <span class="status status-generated">
                                        Generated
                                    </span>

                                {% elif report.status == "prepared" %}

                                    <span class="status status-prepared">
                                        Prepared
                                    </span>

                                {% elif report.status == "submitted" %}

                                    <span class="status status-submitted">
                                        Submitted
                                    </span>

                                {% elif report.status == "reviewed" %}

                                    <span class="status status-reviewed">
                                        Reviewed
                                    </span>

                                {% elif report.status == "rejected" %}

                                    <span class="status status-rejected">
                                        Rejected
                                    </span>

                                {% else %}

                                    <span class="status status-generated">
                                        {{ report.status|title }}
                                    </span>

                                {% endif %}

                            </td>


                            <td>

                                <span class="created-date">

                                    {% if report.created_at %}

                                        {{ report.created_at.strftime("%d %b %Y") }}

                                    {% else %}

                                        -

                                    {% endif %}

                                </span>

                            </td>


                            <td>

                                <div class="actions">

                                    {% if current_user.role in ["admin", "superadmin"] %}


                                        {% if report.status == "generated" %}

                                            <a
                                                href="{{ url_for('prepare_report', report_id=report.id) }}"
                                                class="action-button action-primary"
                                            >
                                                <i class="fa-solid fa-pen-to-square"></i>
                                                Prepare
                                            </a>


                                        {% elif report.status == "prepared" %}

                                            <a
                                                href="{{ url_for('download_report', report_id=report.id) }}"
                                                class="action-button action-secondary"
                                            >
                                                <i class="fa-solid fa-download"></i>
                                                Download
                                            </a>


                                        {% elif report.status == "submitted" %}

                                            <a
                                                href="{{ url_for('review_report', report_id=report.id) }}"
                                                class="action-button action-review"
                                            >
                                                <i class="fa-solid fa-magnifying-glass"></i>
                                                Review
                                            </a>


                                        {% elif report.status == "reviewed" %}

                                            <a
                                                href="{{ url_for('download_report', report_id=report.id) }}"
                                                class="action-button action-success"
                                            >
                                                <i class="fa-solid fa-download"></i>
                                                Download
                                            </a>


                                        {% elif report.status == "rejected" %}

                                            <a
                                                href="{{ url_for('download_report', report_id=report.id) }}"
                                                class="action-button action-danger"
                                            >
                                                <i class="fa-solid fa-download"></i>
                                                Download
                                            </a>

                                        {% endif %}


                                    {% elif current_user.role == "school" %}


                                        {% if report.status == "prepared" %}

                                            <a
                                                href="{{ url_for('download_report', report_id=report.id) }}"
                                                class="action-button action-primary"
                                            >
                                                <i class="fa-solid fa-download"></i>
                                                Download
                                            </a>


                                        {% elif report.status == "submitted" %}

                                            <span class="status status-submitted">
                                                Awaiting Review
                                            </span>


                                        {% elif report.status == "reviewed" %}

                                            <span class="status status-reviewed">
                                                Completed
                                            </span>


                                        {% elif report.status == "rejected" %}

                                            <a
                                                href="{{ url_for('download_report', report_id=report.id) }}"
                                                class="action-button action-danger"
                                            >
                                                <i class="fa-solid fa-download"></i>
                                                Download
                                            </a>

                                            {% if report.submission and report.submission.rejection_reason %}

                                                <span class="rejected-message">
                                                    {{ report.submission.rejection_reason }}
                                                </span>

                                            {% endif %}


                                        {% elif report.status == "generated" %}

                                            <span class="status status-generated">
                                                Being Prepared
                                            </span>

                                        {% endif %}


                                    {% endif %}

                                </div>

                            </td>

                        </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>

    {% else %}

        <div class="empty-state">

            <div class="empty-icon">
                <i class="fa-regular fa-file-lines"></i>
            </div>

            <h2 class="empty-title">
                No Reports Available
            </h2>

            {% if current_user.role in ["admin", "superadmin"] %}

                <p class="empty-description">
                    No monthly reports have been generated yet.
                </p>

            {% else %}

                <p class="empty-description">
                    There are currently no reports available for your school.
                </p>

            {% endif %}

        </div>

    {% endif %}

</div>

{% endblock %}